<template>
	<view class="gold-tab">
		<u-sticky>
			<u-tabs :list="list" is-scroll active-color="#000" :current="current" @change="change"></u-tabs>
		</u-sticky>

		<view>
			<view class="list">
				<my-coupon :type="i.coupon_type.type_class" :amount="i.amount" :threshold="i.threshold" :expire="i.expire_time" btn="立即使用"
				 v-for="i in list[current].data" :key="i.id" @click="$goto('/pages/home/index', 'tab')"></my-coupon>
			</view>

			<u-loadmore :status="list[current].status" bg-color="#EFF1F4" margin-top="30" margin-bottom="30"></u-loadmore>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [{
					name: '影视券',
					type: 'film',
					status: 'loadmore',
					data: []
				}, {
					name: '设计券',
					type: 'development',
					status: 'loadmore',
					data: []
				}, {
					name: '企划券',
					type: 'agent',
					status: 'loadmore',
					data: []
				}, {
					name: '物料券',
					status: 'loadmore',
					type: 'materials',
					data: []
				}, {
					name: '服务券',
					type: 'service',
					status: 'loadmore',
					data: []
				}, {
					name: '通用券',
					type: 'cash',
					status: 'loadmore',
					data: []
				}],
				current: 0
			}
		},
		onLoad() {
			this.getData()
		},
		methods: {
			change(index) {
				this.current = index;
				this.getData()
			},
			getData() {
				let current = this.list[this.current]
				current.data = []
				current.status = 'loading'
				this.$u.get('/coupon/list?type=' + current.type).then(res => {
					current.data = res.data.result.coupon
					current.status = 'nomore'
				})
			}
		}
	}
</script>
